<template>
    <div class="major">
        <div class="content">
            <el-row class="button">
                <el-button type="primary" plain @click="addMajorVisible=true">添加</el-button>
                <el-button type="danger" plain @click="deleteMajor">删除</el-button>
            </el-row>
            <el-table
                ref="majorTable"
                :data="majorData"
                tooltip-effect="dark"
                class="majorTable"
                @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="majorName"
                    label="专业名称"
                    width="220">
                    <template slot-scope="scope">{{scope.row.majorName}}专业课程计划</template>
                </el-table-column>
                <el-table-column
                    prop="operate"
                    label="操作"
                    align="center">
                        <template slot-scope="scope">
                            <el-link @click="handleCheckClick(scope)">查看</el-link>
                        </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog
            title="添加专业"
            :visible.sync="addMajorVisible"
            width="30%"
            class="dialog"
            :close-on-click-modal="false"
        >
            <el-steps :active="1" align-center>
                <el-step title="输入专业名称"></el-step>
                <el-step title="添加课程"></el-step>
                <el-step title="设置先修关系"></el-step>
            </el-steps>
            <el-form :model="major" status-icon ref="major" label-width="100px" class="addMajorForm">
                <el-form-item label="专业名称" prop="majorName">
                    <el-input v-model="major.majorName" placeholder="请输入专业名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addMajor">确定</el-button>
                    <el-button @click="resetForm('major')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog
            title="添加课程"
            :visible.sync="addLessonVisible"
            width="30%"
            class="dialog"
            :close-on-click-modal="false"
        >
            <el-steps :active="2" align-center>
                <el-step title="输入专业名称"></el-step>
                <el-step title="添加课程"></el-step>
                <el-step title="设置先修关系"></el-step>
            </el-steps>
            <el-form :model="lesson" status-icon ref="lesson" label-width="100px" class="addLessonForm">
                <el-form-item label="课程名称" prop="name">
                    <el-input v-model="lesson.name" placeholder="请输入课程名称"></el-input>
                </el-form-item>
                <el-form-item label="课程学分" prop="credit">
                    <el-input v-model="lesson.credit" placeholder="请输入课程学分"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" plain @click="addLesson">添加</el-button>
                    <el-button @click="resetForm('lesson')">重置</el-button>
                    <el-button type="primary" @click="confirmAddLesson">确定</el-button>
                </el-form-item>
            </el-form>
            <el-table
                ref="lessonTable"
                :data="lessonData"
                tooltip-effect="dark"
                height="300"
                class="lessonTable"
                @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="课程名称"
                    width="220">
                </el-table-column>
                <el-table-column
                    prop="credit"
                    label="学分"
                    width="220">
                </el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog
            title="设置先修关系"
            :visible.sync="setBeforeVisible"
            width="30%"
            class="dialog"
            :close-on-click-modal="false"
        >
            <el-steps :active="3" align-center>
                <el-step title="输入专业名称"></el-step>
                <el-step title="添加课程"></el-step>
                <el-step title="设置先修关系"></el-step>
            </el-steps>
            <el-table
                ref="lessonTable"
                :data="lessonData"
                tooltip-effect="dark"
                height="300"
                class="lessonTable">
                <el-table-column
                    prop="name"
                    label="课程名称"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="credit"
                    label="学分">
                </el-table-column>
                <el-table-column
                    prop="operate"
                    label="操作"
                    align="center">
                        <template slot-scope="scope">
                            <el-link @click="handleSetClick(scope)">设置</el-link>
                        </template>
                </el-table-column>
            </el-table>
            <el-form :model="lesson" status-icon ref="lesson" label-width="100px" class="addBeforeForm">
                <el-form-item label="限修学分" prop="credit">
                    <el-input v-model="lesson.credit" placeholder="请输入每学期限修学分"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="confirmAddBefore">完成</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        
        <el-dialog
            :title="'设置《' + settingLesson.name + '》的先修关系'"
            :visible.sync="setOneBeforeVisible"
            width="30%"
            class="dialog"
            :close-on-click-modal="false"
        >
            <el-table
                ref="lessonExceptTable"
                :data="lessonExceptData"
                tooltip-effect="dark"
                height="300"
                class="lessonExceptTable"
                @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="课程名称"
                    width="220">
                </el-table-column>
                <el-table-column
                    prop="credit"
                    label="学分"
                    width="220">
                </el-table-column>
            </el-table>
            <div class="dialog-footer">
                <el-button type="primary" @click="addBefore">确定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import axios from 'axios';
export default {
    mounted(){
        this.getMajorTable();
    },
    methods:{
        getMajorTable(){
            axios({
                method:"get",
                url:"http://localhost:8080/getMajorTable",
            }).then(resp =>{
                this.majorData=resp.data.data;
            })
        },
        getLessonList(){
            axios({
                method:"get",
                url:"http://localhost:8080/getLessonList/"+this.major.id,
            }).then(resp =>{
                this.lessonData=resp.data.data;
            })
        },
        addMajor(){
            axios({
                method:"get",
                url:"http://localhost:8080/addMajor?majorName="+this.major.majorName,
            }).then(resp =>{
                if(resp.data.code){
                    this.major.id=resp.data.data;
                    this.addMajorVisible=false;
                    this.addLessonVisible=true;
                }else{
                    this.$message({
                        message: '添加失败',
                        type: 'error'
                    });
                }
            })
        },
        deleteMajor(){
            this.$confirm('确定要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios({
                method:"post",
                url:"http://localhost:8080/deleteMajor",
                data:this.multipleSelection,
                }).then(resp =>{
                    if(resp.data.code){
                        this.getMajorTable();
                        this.multipleSelection=[];
                    }else{
                        this.$message({
                            message: '删除失败',
                            type: 'error'
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        addLesson(){
            axios({
                method:"post",
                url:"http://localhost:8080/addLesson",
                data:{
                    name:this.lesson.name,
                    credit:this.lesson.credit,
                    term:this.lesson.term,
                    major:this.major.id,
                }
            }).then(resp =>{
                if(resp.data.code){
                    this.getLessonList();
                    this.resetForm('lesson');
                }else{
                    this.$message({
                        message: '添加失败',
                        type: 'error'
                    });
                }
            })
        },
        confirmAddLesson(){
            this.addLessonVisible=false;
            this.setBeforeVisible=true;
        },

        toggleSelection(rows) {
            if (rows) {
            rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row);
            });
            } else {
            this.$refs.multipleTable.clearSelection();
            }
        },
        handleSetClick(scope){
            this.settingLesson.id=scope.row.id;
            this.settingLesson.name=scope.row.name;
            axios({
                method:"get",
                url:"http://localhost:8080/getLessonExcept?lessonId="+scope.row.id+"&majorId="+this.major.id,
            }).then(resp =>{
                if(resp.data.code){
                    this.lessonExceptData=resp.data.data;
                    this.multipleSelection=[];
                    this.setOneBeforeVisible=true;
                    this.setBeforeVisible=false;
                }else{
                    this.$message({
                        message: '获取失败',
                        type: 'error'
                    });
                }
            })
        },
        addBefore(){
            axios({
                method:"post",
                url:"http://localhost:8080/addBefore",
                data:{lessonId:this.settingLesson.id,beforeLessons:this.multipleSelection},
            }).then(resp =>{
                if(resp.data.code){
                    this.setOneBeforeVisible=false;
                    this.setBeforeVisible=true;
                    this.getLessonList();
                    this.multipleSelection=[];
                }else{
                    this.$message({
                        message: '添加失败',
                        type: 'error'
                    });
                }
            })
        },
        confirmAddBefore(){
            axios({
                method:"get",
                url:"http://localhost:8080/makePlan?majorId="+this.major.id+"&limitCredit="+this.lesson.credit,
            }).then(resp =>{
                if(resp.data.code){
                    this.setBeforeVisible=false;
                    this.getMajorTable();
                    this.multipleSelection=[];
                    this.resetForm('lesson');
                }else{
                    this.$message({
                        message: '添加失败',
                        type: 'error'
                    });
                }
            })
        },
        handleCheckClick(scope){
            this.$router.push({path:'/lessons/'+scope.row.id});
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 重置方法
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    data() {
      return {
        addMajorVisible: false,
        addLessonVisible: false,
        setBeforeVisible: false,
        setOneBeforeVisible: false,
        lessonData: [],
        majorData: [],
        multipleSelection: [],
        lessonExceptData: [],
        lesson: {
            id: '',
            name: '',
            credit: '',
            term: '',
        },
        settingLesson:{
            id: '',
            name: '',
        },
        major: {
            id: '',
            majorName: '',
        },
      }
    },
}
</script>

<style scoped>
.major {
    background-image: url('@/assets/GDUT.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
    margin-top: 50px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.content {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 80px;
    border-radius: 40px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #333;
}

.button {
    text-align: left;
}

.majorTable {
    width: 100%; /* 设置表格宽度 */
    height: 500px; /* 设置表格高度 */
    margin: 0 auto; /* 居中对齐 */
}

.dialog {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 40px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #333;
}

.dialog-footer {
    text-align: right;
    margin-top: 20px;
}


</style>